<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.el-rate .el-rate__item .el-rate__icon  {
            font-size: 30px;
        }
    </style>
</head>


<body style="background-color: #fff">
<div id="app">
    <el-container>
<!--        页面头部-->
        <el-header style="background-color: #e3e4e5" height="90px">
            <h1 align="center" style="font-size: 40px; color: #3a8ee6">江格尔虚拟人对话系统</h1>

        </el-header>
        <el-container>
            <!--            页面主要部分-->
            <el-main style="background-color: #FFFFFF">
                <!--                聊天框区域-->
                <template >
                    <el-table
                            :data="tableData"
                            style="width: 88%"
                            empty-text=""
                            height="540px"
                            stripe
                            :header-cell-style="tableHeaderColor"
                            :cell-style="cell_Style">
                        <el-table-column
                                prop="bot"
                                label="bot"
                                width="450"
                                header-align="center">
                        </el-table-column>
                        <el-table-column
                                prop="user"
                                label="user"
                                width="450"
                                header-align="center">
                        </el-table-column>
                    </el-table>
                </template>
                <br/>
                <!--                input输入框-->
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <textarea placeholder="请输入问题" v-model="textarea" @keydown.enter="onSubmit"  cols="30" rows="5" style="width: 900px; height: 60px; resize: none; font-size: 20px"></textarea>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" @click="onSubmit">发送</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
<!--            页面侧边栏-->
            <el-aside style="background-color: #FFFFFF" width="450px" >
                <br><br><br>
                <div align="center">
                    <h2 align="center">请对本系统进行评分：</h2>
                    <el-rate
                            v-model="starCount"
                            show-text>
                    </el-rate>
                </div>
                <div style="margin-left: 280px">
                    <br>
                    <el-button type="primary" @click="submitStar">提交</el-button>
                </div>
                <br><br><br><br>
                <div align="center">
                    <h2>对本系统的相关意见和建议：</h2><br><br>
                    <textarea v-model="comment" cols="30" rows="10" style="resize: none;width: 300px; height: 200px; font-size: 20px">
                    </textarea>
                </div>
                <div style="margin-left: 280px">
                    <br>
                    <el-button type="primary" @click="submitComment">提交</el-button>
                </div>
            </el-aside>

        </el-container>
    </el-container>
</div>

<!--<script src="https://unpkg.com/vue"></script>
&lt;!&ndash; 引入样式 &ndash;&gt;
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
&lt;!&ndash; 引入组件库 &ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios"></script>-->
<script src="../static/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="../static/element-ui/lib/index.js"></script>
<script src="../static/js/axios-0.18.0.js"></script>
<script src="../static/js/socket.io.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            textarea: "",
            socket: null,
            starCount: null,
            submitStarCount: 0,
            post_data: {
                sender: "test_user3",
                message: ""
            },
            comment: "",
            // tableData: []
            tableData: [{
                bot: '您好，我是您亲爱的朋友，江格尔！',
                user: '',
            }
            ],
            session_id: "",
            answering: false
        },
        mounted(){
          this.connectToSocket();
        },
        methods: {
            // 提交聊天问题
            connectToSocket(){

                // 连接到Rasa服务器的Socket.IO
                this.socket = io("ws://localhost:5005"); // 确保这里的URL和端口匹配你的Rasa服务器

                this.socket.on("connect",() => {
                   console.log("socket.io connected");
                   this.socket.emit("session_request", { data: "" });
                });

                this.socket.on("session_confirm", (session_id) => {
                   console.log("session confirmed with id:", session_id);
                   this.session_id = session_id;
                });

                // 监听从Rasa服务器接收的消息
                this.socket.on('bot_uttered', (message) => {
                    console.log(message)

                    if(message.hasOwnProperty("text"))
                        this.tableData[this.tableData.length-1].bot+=message.text.toString()

                    if(message.hasOwnProperty("attachment")&& message.attachment === "finish")
                        this.answering = false

                });
            },
            onSubmit() {
                if(this.answering)
                    return

                if (this.textarea){
                    this.tableData.push({user:this.textarea, bot:""});
                    this.post_data.message = this.textarea;
                    setTimeout(()=>{
                        var elemn = document.getElementsByClassName("el-table__body-wrapper");
                        elemn[0].scrollTop = elemn[0].scrollHeight;
                        this.textarea = "";
                    }, 0.01);
                    console.log(this.textarea)
                    this.socket.emit('user_uttered', { message: this.textarea, session_id: this.session_id });
                    this.tableData.push({user:"", bot:""})
                    this.answering = true
                }
                else{
                    setTimeout(()=>{
                        this.textarea = "";
                    }, 0.01);
                    this.$message({
                        message: '请输入问题！',
                        type: 'warning'
                    });
                }

            },
            // 设置聊天框表头样式
            tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
                return 'font-size: 30px;color: rgb(54, 140, 255)'
            },
            // 设置聊天框单元格样式
            cell_Style ({row, column, rowIndex, columnIndex}){
                return 'font-size: 20px;color: black'
            },
            // 提交评分
            submitStar(){
                if(!this.submitStarCount){
                    if(this.starCount)
                    {
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        });
                        this.submitStarCount = 1;
                    }
                    else{
                        this.$message({
                            message: '请打分后再提交！',
                            type: 'warning'
                        });
                    }
                }
                else {
                    this.$message({
                        message: '您已提交过，请勿重复提交！',
                        type: 'warning'
                    });
                }
            },
            // 提交建议
            submitComment(){
                if(this.comment)
                {
                    this.$message({
                        message: '提交成功！',
                        type: 'success'
                    });
                }
                else{
                    this.$message({
                        message: '请评价后再提交！',
                        type: 'warning'
                    });
                }
            }
        }
    })
</script>
</body>
</html>